<script setup lang="ts">
import {ref, watch} from "vue";
import {getRecruitmentInfo} from "@/api/path/recommend";
import {useRouter} from "vue-router";

const props = defineProps({
  id: String,
})
const router = useRouter()
interface rType {
  enterprise_id: string,
  name: string,
  job_count: string,
  salary: string,
  address: string,
  education: string,
  requirement: string,
}
const recruitmentData = ref<rType>({
  enterprise_id: '5',
  name: '',
  job_count: '',
  salary: '',
  address: '',
  education: '',
  requirement: '',
});
watch(() => props, (newValue) => {
  if (newValue.id) {
    getRecruitmentInfo(newValue.id).then(res => {
      if (res.success) {
        recruitmentData.value.enterprise_id = res.enterprise_id;
        recruitmentData.value.education = res.education ? res.education : '暂无数据';
        recruitmentData.value.address = res.address ? res.address : '暂无数据';
        recruitmentData.value.salary = res.salary;
        recruitmentData.value.requirement = res.requirement;
        recruitmentData.value.name = res.name;
        recruitmentData.value.enterprise_id = res.enterprise_id;
      }
    })
  }
},{deep: true, immediate: true})
</script>

<template>
  <span class="r-wrapper">
    <span class="info-wrapper">
      <span class="title">
        {{recruitmentData.name}}
      </span>
      <span class="enter-intro">
        {{recruitmentData.requirement}}
      </span>
      <span class="detail-group">
<!--        <span v-for="item in enterpriseData.enterpriseClass" :key="item" class="detail-info">-->
        <!--          {{item}}-->
        <!--        </span>-->
        <span class="detail-info">
          {{recruitmentData.salary}}
        </span>
        <span class="detail-info">
          {{recruitmentData.address}}
        </span>
        <span class="detail-info">
          {{recruitmentData.education}}
        </span>
        <span class="detail-info last clickable" @click="router.push({
        path: '/enterprise',
        query: {
          enterpriseId: recruitmentData.enterprise_id
        }
        })">
          了解我们
        </span>
      </span>
    </span>
  </span>

</template>

<style scoped>
.r-wrapper {
  display: flex;
  /*height: 300px;*/
  padding: 20px 20px 0 20px;
  width: 100%;
  flex-direction: column;
  &::after {
    content: '';
    height: 1px;
    width: 100%;
    background-color: var(--color-border);
    position: relative;
    bottom: 0;
  }
  .info-wrapper {
    /*margin-top: 50px; !*把企业头像避开*!*/
    /*margin-left: 30px;*/
    display: flex;
    flex-direction: column;
    width: 100%;
    .title {
      font-size: 30px;
      font-weight: 700;
      /*&:hover {*/
      /*  cursor: pointer;*/
      /*  color: var(--color-primary);*/
      /*  text-decoration: underline;*/
      /*}*/
    }
    .enter-intro {
      font-size: var(--font-size-base);
    }
    .detail-group {
      .detail-info {
        color: grey;
        font-size: var(--font-size-small);
        &:not(.last)::after {
          content: '·';
          position: relative;
          padding: 0 5px
        }
      }
    }
  }
}
.clickable:hover {
  cursor: pointer;
  color: var(--color-primary);
  text-decoration: underline;
}
</style>